<!--
 * @Author: Leo.wang wanglizhigs@163.com
 * @Date: 2023-12-06 21:04:39
 * @LastEditors: Leo.wang wanglizhigs@163.com
 * @LastEditTime: 2023-12-24 23:16:59
 * @FilePath: /tuberculosis_screening_display_system/src/views/home.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="grid column_5 gap_default full" ref="domRef">
    <div class="grid-item column_2">
      <div class="card bar">
        <h3>当前筛查累计总人数：52538人</h3>
      </div>
      <ScheduleChart
        v-if="height"
        class="card full"
        :height="height - 57 - 16 - 18*2"
        title="分地区筛查进度"
        subTitle="(%)"
        :data="schedules"
        :legend="[
          {
            label: '筛查总人数',
            key: 'rate',
          },
        ]"
        label="type"
      ></ScheduleChart>
    </div>
    <div class="grid-item column_3">
      <Map v-if="height" :height="height" class="card full">
        <div class="heading grid gap_sm column_9">
          <div class="grid-item">
            <div class="panel">
              <p class="title">总人数</p>
              <p class="value"><span>59067</span>人</p>
            </div>
          </div>

          <div class="grid-item">
            <div class="panel">
              <p class="title">累计筛查人数</p>
              <p class="value"><span>52538</span>人</p>
            </div>
          </div>

          <div class="grid-item">
            <div class="panel">
              <p class="title">今日筛查人数</p>
              <p class="value"><span>0</span>人</p>
            </div>
          </div>

          <div class="grid-item">
            <div class="panel">
              <p class="title">PPD≥10mm</p>
              <p class="value"><span>661</span>人</p>
            </div>
          </div>

          <div class="grid-item">
            <div class="panel">
              <p class="title">DR异常人数</p>
              <p class="value"><span>881</span>人</p>
            </div>
          </div>

          <div class="grid-item">
            <div class="panel">
              <p class="title">痰检人数</p>
              <p class="value"><span>1062</span>人</p>
            </div>
          </div>

          <div class="grid-item">
            <div class="panel">
              <p class="title">发现患者数</p>
              <p class="value"><span>478</span>人</p>
            </div>
          </div>

          <div class="grid-item">
            <div class="panel">
              <p class="title">潜伏感染者数</p>
              <p class="value"><span>0</span>人</p>
            </div>
          </div>

          <div class="grid-item">
            <div class="panel">
              <p class="title">纳入治疗数</p>
              <p class="value"><span>0</span>人</p>
            </div>
          </div>
        </div>
      </Map>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watch } from "vue";
import Card from "../components/Card";
import Map from "../components/Map";
import ScheduleChart from "@/components/ScheduleChart";
import { getRegionSchedule } from "@/api/global.api";
export default defineComponent({
  components: {
    Card,
    Map,
    ScheduleChart,
  },
  props: {
    code: Number,
  },
  setup() {
    const schedules = ref([]);

    async function getData() {
      schedules.value = await getRegionSchedule();
    }

    onMounted(() => {
      getData();
    });

    const domRef = ref();
    const height = ref();
    watch(domRef, (dom) => {
      height.value = dom.offsetHeight - 16 * 2;
    });

    return {
      schedules,
      domRef,
      height,
    };
  },
});
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.content {
  height: calc(100% - 60px);
}
.heading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.panel {
  border: solid 1px #00E8FF;
  text-align: center;
  border-radius: map-get($radii, xs);
  background: #0a2e5c;
  box-shadow: 0 0 4px 0 #00E8FF;
  padding: 4px;
  .title {
    font-size: 14px;
  }
  .value {
    font-size: 18px;
    color: #00E8FF;
  }
}
.bar {
  padding: $space;
  margin-bottom: $space;
  text-align: center;
  height: 54px;
}
</style>

